import Taro, { Component } from '@tarojs/taro'
import { ScrollView, View, Image } from '@tarojs/components'
import './index.scss'
import { AtRate } from 'taro-ui'
import { formatTime } from "@/utils/utils"
import classNames from 'classnames'
import { toCommentInfoPage } from '@/utils/page_router'
import headImg from "@/assets/icon/user-avatar.png";

interface IProps {
  info: any
  className: string
}

/**
 * 商品评论
 */
export default class CommentGoods extends Component<IProps, {}> {
  props: any
  state: any

  static options = {
    addGlobalClass: true
  }

  constructor (props) {
    super(...arguments)
    this.state = {
      info: props.info
    }
  }

  //  查看图片
  onSeeImg(list, url, e) {
    e.stopPropagation()
    Taro.previewImage({ current: url, urls: list })
  }

  render() {
    const { className } = this.props
    const { info={} }:any = this.state
    const userInfo = info.userInfo || {}
    return (<View className={classNames('goods-comment', className)}>
      <View className='goods-comment__head' onClick={() => toCommentInfoPage(info.id)}>
        <View className='user-box d-f'>
          <Image src={userInfo.headImg || headImg} className='user-avatar'/>
          <View className='user-info d-f f-d-c'>
            <View className='user-name'>{userInfo.nickName}</View>
            <View className='other-box d-f a-i-f-e p-t-10'>
              <View className='grade-title p-r-10 l-h-1'>评分</View>
              <AtRate value={info.productScore} size={12}/>
            </View>
          </View>
          <View className='comment-time'>{formatTime(info.createdAt, 'YYYY-MM-DD HH:mm')}</View>
        </View>
        <View className='comment-content'>{ info.comment || '这家伙很懒，什么也没有留下。' }</View>
        {info.pics && info.pics.length && <ScrollView scrollX className='photo-scroll'>
          <View className='photo-list'>
            {info.pics.map((url, k) => {
              return (<Image key={k} src={url} lazyLoad className='photo-item' onClick={this.onSeeImg.bind(this, info.pics, url)}/>)
            })}
          </View>
        </ScrollView>}
      </View>
      {this.props.children}
    </View>)
  }
}
